import React from 'react';
import ReactDOM from 'react-dom'

const findChild = (children,child) => {
    return React.Children.toArray(children).filter(c=>c.type === child)[0]
};
const WhenTruthy = (children) => {
    return React.Children.only(children)
};
const WhenFalsy = (children) => {
    return React.Children.only(children)
};
const Display = ({ifTruthy = true, children}) => {
    return (ifTruthy) ? findChild(children,WhenTruthy) : findChild(children,WhenFalsy);
}
/*
const Display = ({ifTruthy = true, children}) => {
    return (ifTruthy) ? findChild(children,WhenTruthy) : findChild(children,WhenFalsy);
}
*/

const age = 22;

ReactDOM.render(
    <Display ifTruthy={age >= 21} >
        <WhenTruthy>
            <h1>You can Enter</h1>
        </WhenTruthy>
        <WhenFalsy>
            <h1>Beat it kid</h1>
        </WhenFalsy>
    </Display>,
    document.getElementById('root'));